<template>
    <div class="AddBlogAdmin">
        <transition name="fade">
            <loading v-if="isLoading"></loading>
        </transition>
        <div class="title" >
            <el-tooltip class="item" effect="light" content="标题不能为空" placement="right" >
                <el-input
                    v-model="title"
                    placeholder="请输入标题...."
                    maxlength="30"
                />
            </el-tooltip>
        </div>
        <h3 v-show="this.autoAdd" style="max-width: 960px;margin: 0 auto;text-align: right;color:#333333">于{{this.time}}自动保存博客成功</h3>
<!--        <h4 v-show="this.autoAdd" style="max-width: 960px;margin: 0 auto;text-align: center;color: #fd7286">每30秒自动保存一次</h4>-->
        <mavon-editor
                v-model="content"
                :toolbars="toolbars"
                @imgAdd="imgAdd"
                @change="change"
                ref="md"
                id="edit"
                :ishljs = "true"
                @save="AutoAddBlog"
                style="height: 600px;"
        />
        <div class="edit-button">
            <el-button @click="addBlog" type="primary" round >提交</el-button>
        </div>
    </div>
</template>

<script>
    import Loading from '../components/loading'
    import 'mavon-editor/dist/markdown/github-markdown.min.css'
    export default {
        name: "AddBlogAdmin",
        components:{ Loading  },
        data(){
            return {
                isLoading:true,
                content: '# 标题\n正文',//输入的数据
                autoAdd:false,
                time:"2020-12-02 18:06",
                blogId: undefined,
                toolbars: {
                    bold: true, // 粗体
                    italic: true, // 斜体
                    header: true, // 标题
                    underline: true, // 下划线
                    strikethrough: true, // 中划线
                    mark: true, // 标记
                    superscript: true, // 上角标
                    subscript: true, // 下角标
                    quote: true, // 引用
                    ol: true, // 有序列表
                    ul: true, // 无序列表
                    link: true, // 链接
                    imagelink: true, // 图片链接
                    code: true, // code
                    table: true, // 表格
                    fullscreen: true, // 全屏编辑
                    readmodel: true, // 沉浸式阅读
                    htmlcode: true, // 展示html源码
                    help: true, // 帮助
                    /* 1.3.5 */
                    undo: true, // 上一步
                    redo: true, // 下一步
                    trash: true, // 清空
                    save: true, // 保存（触发events中的save事件）
                    /* 1.4.2 */
                    navigation: true, // 导航目录
                    /* 2.1.8 */
                    alignleft: true, // 左对齐
                    aligncenter: true, // 居中
                    alignright: true, // 右对齐
                    /* 2.2.1 */
                    subfield: true, // 单双栏模式
                    preview: true, // 预览
                },
                title:null
            }
        },
        created() {
            this.blogId=this.$route.params.blogId
            if (typeof this.blogId != 'undefined') {
                this.axios.get('/blog/' + this.blogId).then((res)=>{
                    if (res.data.data != null) {
                        this.title = res.data.data.title;
                        this.content = res.data.data.content;
                    } else {
                        this.$message({
                            showClose: true,
                            message: '未查询到草稿信息',
                            type: 'error'
                        });
                    }
                })
            }
            this.isLoading = false;
        },
        methods:{
            // 将图片上传到服务器，返回地址替换到md中
            imgAdd(pos, $file){
                let formdata = new FormData();
                formdata.append('file', $file);
                //访问后台服务器方法
                this.axios.post('/file/upload',formdata)
                    .then((res)=>{
                    if (res.data.code === 200) {
                        //回显
                        this.$refs.md.$img2Url(pos, res.data.data);
                    } else {
                        this.$message.error(res.data.msg)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            change(value, render) {
                // render 为 markdown 解析后的结果
                this.html = render;
            },
            addBlog(){
                if (this.title !== null && this.title !== '') {
                    if (typeof this.blogId == 'undefined') {
                        this.axios.post('/blog',{
                            content: this.content,
                            title: this.title,
                            type: 0
                        }).then((res)=>{
                            this.blogId = res.data.data;
                        })
                    }
                    this.axios.patch('/blog',{
                        content: this.content,
                        id: this.blogId,
                        status: 1
                    }).then((res)=>{
                        if (res.data.code === 200) {
                            this.$message({
                                showClose: true,
                                message: '发布成功',
                                type: 'success'
                            });
                            this.$router.push('/BlogEdit');
                        }
                    })
                } else {
                    this.$message({
                        showClose: true,
                        message: '发布失败, 请输入标题!!!',
                        type: 'error'
                    });
                }
            },
            AutoAddBlog(){
                console.log(this.blogId)
                if (this.title !== null && this.title !== '') {
                    if (typeof this.blogId == 'undefined') {
                        this.axios.post('/blog',{
                            content: this.content,
                            title: this.title,
                            type: 0
                        }).then((res)=>{
                            this.blogId = res.data.data;
                        })
                    } else {
                        this.axios.patch('/blog',{
                            content: this.content,
                            id: this.blogId,
                            status: 0
                        })
                    }
                    this.autoAdd=true
                    this.time=new Date().toLocaleString()
                    // console.log("自动保存")
                } else {
                    this.$message({
                        showClose: true,
                        message: '保存失败, 请输入标题!!!',
                        type: 'error'
                    });
                }
            }
        },
        mounted() {
             this.autoChange=window.setInterval(this.AutoAddBlog,30000)
        },
        destroyed() {
            clearInterval(this.autoChange)
        }
    }
</script>

<style scoped>
.title {
    text-align: center;
    margin: 0 auto;
    width:200px;
    height:50px
}
.title>>>.el-input__inner {
    margin-top: 10px;
    font-size: x-large;
    background-color: transparent;
    font-style: oblique;
    border: 0;
}
.right {
    float: right;
    width: 60px;
}
.AddBlogAdmin h2{
    margin: 10px auto;
    max-width: 960px;
    text-align: center;
}
    #edit{
        height: 400px;
        margin-top: 20px;
    }
    .edit-button{
        margin: 10px auto;
        max-width: 960px;
        text-align: center;
    }
    .edit-button .el-button{
        width: 200px;
    }
@media screen and (max-width: 500px) {
    .el-message {
        min-width: 300px !important;
    }
}
@media screen and (max-width: 500px) {
    .el-message-box{
        width: 300px !important;
    }
}
</style>